<template>
	<view>
		<view class="ke_wrap">
			<view class="ke_left">
				<view class="ke_list" v-for="item in Flist" :key="item._id">
					<view :class="['fu_list_one',nowId==item._id?'active':'']"
					 @click="toChange(item._id)">
						{{item.dep_ment}}
					</view>
				</view>
			</view>
			<!-- 子科室 -->
			<view class="ke_right">
				<view class="zlist">
					<view class="z_one" :key="item.dep_id" v-for="(item,index) in dep_ment_list"
					@click="toTurn(item.dep_id)">
					   {{item.dep_name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getParentKe,getChildKe} from '@/api/test.js'
	export default {
		data(){
			return {
			  Flist:[],//父科室列表
			  nowId:"",//当前的父科室id
			  dep_ment_list:[]//子科室列表
			}
		},
		onLoad(){
			this.getParent();
		},
		methods:{
			toTurn(id){
				// 跳转并传参
				uni.navigateTo({
					url:"/pages/guaHao/docator?id="+id
				})
			},
			async toChange(id){ //点击切换 获取子科室
				
				this.nowId=id;
				let res=await getChildKe(this.nowId)
				console.log(res,"-----------")
				this.dep_ment_list=res.data[0].dep_ment_list
			},
			async getParent(){ //父科室
				let res=await getParentKe();
				console.log(res,"^^^^^^^^^^^");
				this.Flist=res.data;
				// 存储第一个父id 为默认选项
				this.nowId=res.data[0]._id;
				// 切换第一个为默认选择
				this.toChange(this.nowId)
			}
		}
	}
</script>

<style lang="scss">
	.ke_wrap{
		width: 100vw;
		display: flex;
		
		.ke_left{
			width:40vw;
			height: 100vw;
			.ke_list{
				.fu_list_one{
					width: 100%;
					height: 50px;
					line-height: 50px;
					text-align: center;
					font-size: 15px;
					&.active{
						background: skyblue;
					}
				}
			}
		}
		.ke_right{
			width: 60vw;
			.zlist{
				.z_one{
					height: 60px;
					line-height: 60px;
					margin-top: 20px;
					color: green;
				}
			}
		}
	}	
</style>